import React, {useEffect, useState} from 'react'
import {Form, Button, Input, Modal, Row, Col, Select} from 'antd'
import { connect } from 'umi'
import {businessTypes} from '@/utils/constant';
const FormItem = Form.Item;
const { Option } = Select;

const formLayout = {
  labelCol: { span: 7 },
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const BpmProcessForm = (props) => {
  const { onSubmit, onCancel, loading,record,visible,global,currentUser } = props;
  const {options = {}} = global;
  const {orgSystem = []} = options;
  const [form] = Form.useForm();
  const [title,setTitle] = useState(null);
  const [lineData,setLineData] = useState({});

  useEffect(() => {
    if(record && visible){
      setTitle("编辑配置");
      let temp = {value: record.jobSystemId, label: record.jobSystemName, key: record.jobSystemId};
      setLineData(temp);
      form.setFieldsValue({...record,jobSystemId:temp});
    }else{
      setTitle("新增配置");
      form.setFieldsValue({createName:currentUser.name});
    }
  }, [visible]);

  const onFormCancel = () => {
    form.resetFields();
    setLineData({});
    onCancel();
  };


  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      ...fieldsValue,
      jobSystemId:lineData?.value,
      jobSystemName:lineData?.label,
      createCode:currentUser.usercode,
      id:record ? record.id : null
    });
    setLineData({});
  };

  const filterOption = (input, option) => {
    return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const handleChange = (option) => {
    setLineData(option);
  };

  const handleTypeChange = (value,option) =>{
    form.setFieldsValue({typeName:option.value,typeId:option.title});
  };

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="jobSystemId" label="体系" rules={[{ required: true, message: '体系不能为空' }]}>
              <Select placeholder="请选择体系" labelInValue showSearch onChange={handleChange} filterOption={filterOption}>
                {orgSystem.map((item, index) => {
                  return (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="typeName" label="业务类型名称" rules={[{ required: true, message: '业务类型名称不能为空' }]}>
              <Select placeholder="请输入业务类型名称" showSearch onChange={handleTypeChange} filterOption={filterOption}>
                {businessTypes.map((item, index) => {
                  return (
                    <Option value={item.label} key={index} title={item.value}>
                      {item.label}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="typeId" label="业务类型id" rules={[{ required: true, message: '业务类型id不能为空' }]}>
              <Input disabled={true} placeholder="请输入业务类型id"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="bpmtypeId" label="流程类型id" rules={[{ required: true, message: '流程类型id不能为空' }]}>
              <Input placeholder="请输入流程类型id"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="bpmtypeName" label="流程类型名称" rules={[{ required: true, message: '流程类型名称不能为空' }]}>
              <Input placeholder="请输入流程类型名称"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="createName" label="创建人">
              <Input disabled={true}/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" loading={loading} onClick={() => handleSubmit()}>提交</Button>
      </>
    )
  };

  return (
    <Modal
      width={1280}
      destroyOnClose
      title={title}
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
};

export default connect(({user, global}) => ({
  currentUser: user.currentUser,
  global
}))(BpmProcessForm);
